<template>
  <create-view
    :loading="loading"
    :body-style="{ height: '100%'}">
    <flexbox
      direction="column"
      align="stretch"
      class="crm-create-container">
      <flexbox class="crm-create-header">
        <div style="flex:1;font-size:17px;color:#333;">{{ title }}</div>
        <img
          class="close"
          src="@/assets/img/task_close.png"
          @click="hidenView" >
      </flexbox>
      <div class="content">
        <quill-editor
          ref="myQuillEditor"
          v-model="content"
          :options="editorOption"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @ready="onEditorReady($event)"
        />
        <el-button type="primary" style="margin: 20px 0 ;" @click="addRemark()">发表评论</el-button>
        <el-card class="box-card" style="height: 390px;overflow-y: auto">
          <template v-if="list.length">
            <div v-for="item in list" class="remarks ">
              <div class="left">
                {{ item.createUserName }}:&nbsp;
              </div>
              <div class="right">
                <div v-html="item.content"/>
                <div class="line">
                  {{ item.updateTime }} &nbsp;&nbsp;
                  <el-button
                    type="text"
                    size="small"
                    @click.native.prevent="addRemark(item)">
                    回复
                  </el-button>
                  &nbsp;
                  <el-button
                    :disabled="canDelete"
                    type="text"
                    size="small"
                    class="hide"
                    @click.native.prevent="deleteRemark(item)">
                    删除
                  </el-button>
                </div>
                <div v-for="item2 in item.replays" class="remarks remarks-content">
                  <div class="left">
                    <span class="el-button--text">{{ item2.createUserName }}</span>
                    回复
                    <span class="el-button--text">{{ item2.parentCreateUserName }}</span>:&nbsp;
                  </div>
                  <div class="right">
                    <div v-html="item2.content"/>
                    <div class="line">
                      {{ item2.updateTime }}&nbsp;&nbsp;
                      <el-button
                        type="text"
                        size="small"
                        @click.native.prevent="addRemark(item2)">
                        回复
                      </el-button>
                      &nbsp;
                      <el-button
                        :disabled="canDelete"
                        type="text"
                        size="small"
                        class="hide"
                        @click.native.prevent="deleteRemark(item2)">
                        删除
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <div v-else>暂无评论</div>

        </el-card>
      </div>
      <el-upload
        ref="upload"
        :show-upload-list="false"
        :on-success="handleSuccess"
        :action="crmFileSaveUrlOss"
        :data="{batchId: batchId}"
        :headers="httpHeader"
        style="display: none"
      >
        <el-button icon="ios-cloud-upload-outline" />
      </el-upload>

    </flexbox>
  </create-view>
</template>
<script type="text/javascript">
import CreateView from '@/components/CreateView'
import CreateSections from '@/components/CreateSections'
import CreateExamineInfo from '@/components/Examine/CreateExamineInfo'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// eslint-disable-next-line no-unused-vars
import quillEmoji from 'quill-emoji'
import 'quill-emoji/dist/quill-emoji.css'

// eslint-disable-next-line no-unused-vars
import { quillEditor } from 'vue-quill-editor'
// eslint-disable-next-line no-unused-vars
import { getRemarkList, updataRemark, deleteRemark } from '../../../api/kmsmanagement/source'
import { mapGetters } from 'vuex'
import { crmFileSaveUrlOss, getProgressPercent } from '@/api/common'
import {
  guid
} from '@/utils'
import axios from 'axios'

export default {
  name: 'KmsCreateView', // 所有新建效果的view
  components: {
    CreateView,
    CreateSections,
    CreateExamineInfo, // 审核信息
    quillEditor
  },
  filters: {

  },
  props: {
    // CRM类型
    kmsType: {
      type: String,
      default: ''
    },
    /**
       * save:添加、update:编辑(action_id)、read:详情、index:列表
       * relative: 相关 添加(目前用于客户等相关添加) 如果有relativeData 直接合并入上传
       */
    action: {
      type: Object, default: () => {
        return {
          type: 'ave',
          id: '',
          data: {} // 编辑所需信息
        }
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    ...mapGetters(['kms']),
    crmFileSaveUrlOss() {
      return crmFileSaveUrlOss
    },
    canDelete() {
      return !this.kms[this.kmsType].deleteComment
    },
    httpHeader() {
      return {
        'Admin-Token': axios.defaults.headers['Admin-Token']
      }
    }
  },
  // eslint-disable-next-line vue/order-in-components
  data() {
    return {
      // 标题展示名称
      title: '评论管理',
      loading: false,
      saveAndCreate: false, // 保存并新建
      content: '',
      list: [],
      batchId: guid(),
      editorOption: {
        theme: 'snow',
        modules: {
          'emoji-toolbar': true,
          'emoji-shortname': true,
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'],
              ['blockquote', 'code-block'],
              [{ 'header': 1 }, { 'header': 2 }],
              [{ 'list': 'ordered' }, { 'list': 'bullet' }],
              [{ 'script': 'sub' }, { 'script': 'super' }],
              [{ 'indent': '-1' }, { 'indent': '+1' }],
              [{ 'direction': 'rtl' }],
              [{ 'size': ['small', false, 'large', 'huge'] }],
              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
              [{ 'color': [] }, { 'background': [] }],
              [{ 'font': [] }],
              [{ 'align': [] }],
              ['clean'],
              ['link', 'image', 'video'],
              ['emoji']
            ],
            handlers: {
              'image': function(value) {
                if (value) {
                  document.querySelector('.el-upload .el-upload__input').click()
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        }
      }
    }
  },
  destroyed() {
    // remove DOM node after destroy
    if (this.$el && this.$el.parentNode) {
      this.$el.parentNode.removeChild(this.$el)
    }
  },
  mounted() {
    this.$nextTick(function() {
      console.log(this.$refs.myQuillEditor)
    })
  },
  methods: {
    handleSuccess(res) {
      this.getPercent(res.uuid)
    },
    getPercent(uuid) {
      var vm = this
      setTimeout(function() {
        getProgressPercent({ uuid: uuid }).then((res) => {
          if (res.data.code === 1 && res.data.count === res.data.total) {
            // 获取富文本组件实例
            const quill = vm.$refs.myQuillEditor.quill
            // 获取光标所在位置
            const length = quill.getSelection().index
            // 插入图片，res为服务器返回的图片链接地址
            quill.insertEmbed(length, 'image', res.data.url)
            // 调整光标到最后
            quill.setSelection(length + 1)
            vm.loading = false
            return vm.file
          }
          if (res.data.code === 0) {
            vm.$message('上传失败！', { type: 'warning' })
            vm.loading = false
            return false
          }
          vm.getPercent(uuid)
        })
      }, 3000)
    },
    hidenView() {
      this.$emit('changeState', false)
    },
    onEditorBlur() {
      console.log(this.content)
      console.log('onEditorBlur')
    },
    onEditorFocus() {
      console.log('onEditorFocus')
    },
    onEditorReady() {
      console.log('onEditorReady')
    },
    init(id) {
      this.resourceId = id
      this.getList()
    },
    getList() {
      this.loading = true
      var params = {
        label: 101,
        resourceId: this.resourceId
      }
      getRemarkList(params)
        .then(res => {
          this.list = res.data.list
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    addRemark(val) {
      this.loading = true
      var params = {
        entity: {
          label: 101,
          resourceId: this.resourceId,
          content: this.content
        }
      }
      if (val) {
        params.entity['pid'] = val.commentId
      }
      if (this.content.trim() == '') {
        this.$message.warning('请输入评论内容')
        this.loading = false
        return
      }
      updataRemark(params)
        .then(res => {
          this.getList()
          this.content = ''
          this.$refs.upload.clearFiles()
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    deleteRemark(val) {
      this.loading = true
      const params = { label: 101 }
      params['commentIds'] = val.commentId
      deleteRemark(params)
        .then(res => {
          this.getList()
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    }
  }
}
</script>
<style lang="scss" scoped>
  .crm-create-container {
    position: relative;
    height: 100%;
  }
  .content {
    height: 100%;
  }
  .hide {
    display: none;
  }
  .line {
    display: flex;
    align-items: center;
    &:hover
      .hide {
      display: block;
    }
  }
  .remarks {
    display: flex;
    margin:15px 0;
    width: 100%;
    .left {
      width:60px;
      white-space: nowrap;
      overflow-x: hidden;
      text-overflow: ellipsis;
    }
    .right {
      width: calc(100% - 60px);
      overflow-x: auto;
   }
  }
  .remarks-content {
    .left {
      width: 110px;
    }
  }

  .crm-create-flex {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1;
  }

  .crm-create-header {
    height: 40px;
    margin-bottom: 20px;
    padding: 0 10px;
    flex-shrink: 0;
    .close {
      display: block;
      width: 40px;
      height: 40px;
      margin-right: -10px;
      padding: 10px;
      cursor: pointer;
    }
  }

  .crm-create-body {
    flex: 1;
    /*overflow-x: hidden;*/
    /*overflow-y: auto;*/
  }

  /** 将其改变为flex布局 */
  .crm-create-box {
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px;
  }

  .crm-create-item {
    flex: 0 0 50%;
    flex-shrink: 0;
    // overflow: hidden;
    padding-bottom: 10px;
  }

  // 占用一整行
  .crm-create-block-item {
    flex: 0 0 100%;
    flex-shrink: 0;
    padding-bottom: 10px;
  }

  .el-form-item /deep/ .el-form-item__label {
    line-height: normal;
    font-size: 13px;
    color: #333333;
    position: relative;
    padding-left: 8px;
    padding-bottom: 0;
  }

  .el-form /deep/ .el-form-item {
    margin-bottom: 0px;
  }

  .el-form /deep/ .el-form-item.is-required .el-form-item__label:before {
    content: '*';
    color: #f56c6c;
    margin-right: 4px;
    position: absolute;
    left: 0;
    top: 5px;
  }

  .handle-bar {
    position: relative;
    .handle-button {
      float: right;
      margin-top: 5px;
      margin-right: 20px;
    }
  }

  .el-button + .el-button {
    margin-left: 0;
  }

  // 审核信息 里的审核类型
  .examine-type {
    font-size: 12px;
    color: white;
    background-color: #fd715a;
    padding: 0 8px;
    margin-left: 5px;
    height: 16px;
    line-height: 16px;
    border-radius: 8px;
    transform: scale(0.8, 0.8);
  }
  /*查重信息*/
  .showBtnCheck {
    margin-left: 8px;
    color: blue;
  }
  /*可输入可选择输入框*/
  .my-autocomplete {
    li {
      line-height: normal;
      padding: 7px;

      .name {
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .addr {
        font-size: 12px;
        color: #b4b4b4;
      }

      .highlighted .addr {
        color: #ddd;
      }
    }
  }
</style>

